CSS कंटेनर क्वेरी लॉजिकल कॉम्बिनेशन में महारत: क्वेरी लॉजिक ऑपरेटर्स की शक्ति को जानें

CSS कंटेनर क्वेरी रिस्पॉन्सिव वेब डिज़ाइन में एक महत्वपूर्ण विकास का प्रतिनिधित्व करती हैं, जो डेवलपर्स को व्यूपोर्ट के बजाय उनके कंटेनिंग एलिमेंट के आकार या स्थिति के आधार पर एलिमेंट्स को स्टाइल करने की अनुमति देती हैं। जबकि बुनियादी कंटेनर क्वेरी शक्तिशाली लचीलापन प्रदान करती हैं, वास्तविक क्षमता तब अनलॉक होती है जब उन्हें लॉजिकल ऑपरेटर्स के साथ जोड़ा जाता है। यह व्यापक गाइड बताएगा कि 'and', 'or', और 'not' का उपयोग करके कैसे परिष्कृत, अनुकूलनीय लेआउट बनाए जाएं जो कंटेनर की स्थितियों पर सटीक रूप से प्रतिक्रिया करते हैं।

CSS कंटेनर क्वेरी क्या हैं? एक त्वरित पुनरावलोकन

लॉजिकल ऑपरेटर्स में गोता लगाने से पहले, आइए जल्दी से पुनरावलोकन करें कि कंटेनर क्वेरी क्या हैं और वे क्यों महत्वपूर्ण हैं।

पारंपरिक मीडिया क्वेरी व्यूपोर्ट-आधारित होती हैं, जिसका अर्थ है कि वे ब्राउज़र विंडो के आकार पर प्रतिक्रिया करती हैं। दूसरी ओर, कंटेनर क्वेरी आपको एक कंटेनिंग एलिमेंट के आकार या स्थिति के आधार पर स्टाइल लागू करने की अनुमति देती हैं। यह अधिक विस्तृत नियंत्रण प्रदान करता है और वास्तव में कंपोनेंट-आधारित रिस्पॉन्सिव डिज़ाइन को सक्षम बनाता है।

उदाहरण के लिए, आपके पास एक कार्ड कंपोनेंट हो सकता है जो जानकारी प्रदर्शित करता है। कंटेनर क्वेरी के साथ, आप पैरेंट कंटेनर के भीतर उसकी चौड़ाई के आधार पर कार्ड के लेआउट को समायोजित कर सकते हैं। यदि कार्ड पर्याप्त चौड़ा है, तो यह जानकारी को एक पंक्ति में प्रदर्शित कर सकता है; यदि यह संकीर्ण है, तो यह एलिमेंट्स को लंबवत रूप से स्टैक कर सकता है। यह सुनिश्चित करता है कि कार्ड पृष्ठ पर कहीं भी रखा गया हो, अच्छा दिखे।

कंटेनर क्वेरी का उपयोग करने के लिए, आपको सबसे पहले एक एलिमेंट पर एक कंटेनर कॉन्टेक्स्ट स्थापित करना होगा। यह container-type प्रॉपर्टी का उपयोग करके किया जाता है। दो सबसे सामान्य मान हैं:

• size: कंटेनर क्वेरी कंटेनर की चौड़ाई और ऊंचाई दोनों पर प्रतिक्रिया करेगी।
• inline-size: कंटेनर क्वेरी इनलाइन आकार (आमतौर पर एक क्षैतिज लेखन मोड में चौड़ाई) पर प्रतिक्रिया करेगी।

आप अपने कंटेनर को एक नाम देने के लिए container-name का भी उपयोग कर सकते हैं, जो आपको नेस्टेड कंटेनर कॉन्टेक्स्ट होने पर विशिष्ट कंटेनरों को लक्षित करने की अनुमति देता है।

एक बार जब आप एक कंटेनर कॉन्टेक्स्ट स्थापित कर लेते हैं, तो आप @container नियम का उपयोग उन शैलियों को परिभाषित करने के लिए कर सकते हैं जो कुछ शर्तों के पूरा होने पर लागू होती हैं।

लॉजिकल ऑपरेटर्स की शक्ति: 'and', 'or', और 'not'

असली जादू तब होता है जब आप कंटेनर क्वेरी को लॉजिकल ऑपरेटर्स के साथ मिलाते हैं। ये ऑपरेटर्स आपको जटिल स्थितियाँ बनाने की अनुमति देते हैं जो विशिष्ट कंटेनर स्थितियों को लक्षित करती हैं। आइए प्रत्येक ऑपरेटर को विस्तार से देखें।

'and' ऑपरेटर: कई शर्तों की आवश्यकता

and ऑपरेटर आपको कई शर्तों को संयोजित करने की अनुमति देता है, जिसके लिए आवश्यक है कि शैलियों के लागू होने के लिए सभी शर्तें पूरी हों। यह उन कंटेनरों को लक्षित करने के लिए उपयोगी है जो एक साथ विशिष्ट आकार और स्थिति मानदंडों को पूरा करते हैं।

उदाहरण: मान लीजिए आपके पास एक कंटेनर है जिसे आप अलग तरह से स्टाइल करना चाहते हैं यदि यह 500px से अधिक चौड़ा है और इसमें एक विशिष्ट डेटा एट्रिब्यूट सेट है।

            
.card-container {
  container-type: inline-size;
}

@container (min-width: 500px) and (data-theme="dark") {
  .card {
    background-color: #333;
    color: #fff;
  }
}

            

              
                Copy
              
            
          

इस उदाहरण में, .card में केवल एक डार्क बैकग्राउंड और सफेद टेक्स्ट होगा यदि .card-container कम से कम 500px चौड़ा हो और इसमें data-theme एट्रिब्यूट "dark" पर सेट हो। यदि कोई भी शर्त पूरी नहीं होती है, तो @container नियम के अंदर की शैलियाँ लागू नहीं होंगी।

'and' के लिए व्यावहारिक उपयोग के मामले:

• सशर्त लेआउट परिवर्तन: एक कंपोनेंट के लेआउट को उसकी चौड़ाई और एक विशिष्ट क्लास या डेटा एट्रिब्यूट की उपस्थिति दोनों के आधार पर बदलें (उदाहरण के लिए, यदि कंटेनर पर्याप्त चौड़ा है और उसमें "featured" क्लास है तो सिंगल-कॉलम से मल्टी-कॉलम लेआउट में बदलना)।
• थीम-विशिष्ट स्टाइलिंग: कंटेनर की थीम (जैसे, डार्क या लाइट मोड) और उसके आकार के आधार पर अलग-अलग स्टाइल लागू करें।
• स्थिति-आधारित स्टाइलिंग: एक कंपोनेंट की उपस्थिति को उसके आकार और क्या वह किसी विशेष स्थिति में है (जैसे, "active", "disabled") के आधार पर समायोजित करें।

'or' ऑपरेटर: कम से कम एक शर्त को पूरा करना

or ऑपरेटर आपको शैलियों को लागू करने की अनुमति देता है यदि निर्दिष्ट शर्तों में से कम से कम एक पूरी हो। यह उन कंटेनरों को लक्षित करने के लिए उपयोगी है जो विभिन्न आकार श्रेणियों में आते हैं या जिनकी अलग-अलग स्थितियाँ हैं।

उदाहरण: मान लीजिए कि आप एक कंटेनर पर एक विशिष्ट शैली लागू करना चाहते हैं यदि यह या तो 300px से कम चौड़ा है या 800px से अधिक चौड़ा है।

            
.card-container {
  container-type: inline-size;
}

@container (max-width: 300px) or (min-width: 800px) {
  .card {
    padding: 1em;
    border: 1px solid #ccc;
  }
}

            

              
                Copy
              
            
          

इस उदाहरण में, .card में 1em का पैडिंग और एक बॉर्डर होगा यदि .card-container या तो 300px से कम चौड़ा हो या 800px से अधिक चौड़ा हो। यदि कंटेनर की चौड़ाई 300px और 800px (समावेशी) के बीच आती है, तो @container नियम के अंदर की शैलियाँ लागू नहीं होंगी।

'or' के लिए व्यावहारिक उपयोग के मामले:

• विभिन्न स्क्रीन आकारों को संभालना: एक कंपोनेंट पर अलग-अलग शैलियाँ लागू करें, इस आधार पर कि क्या यह एक छोटी स्क्रीन (जैसे, एक मोबाइल डिवाइस) या एक बड़ी स्क्रीन (जैसे, एक डेस्कटॉप) पर प्रदर्शित होता है।
• वैकल्पिक लेआउट प्रदान करना: एक कंपोनेंट के लिए अलग-अलग लेआउट प्रदान करें, इस पर निर्भर करते हुए कि उसके पास कितनी उपलब्ध जगह है।
• कई थीम का समर्थन करना: एक कंपोनेंट के विभिन्न थीम या विविधताओं के लिए विशिष्ट शैलियाँ लागू करें। उदाहरण के लिए, एक कंपोनेंट की अलग-अलग शैलियाँ हो सकती हैं, इस पर निर्भर करते हुए कि क्या इसका उपयोग "primary" या "secondary" संदर्भ में किया जाता है, इसके आकार की परवाह किए बिना।

'not' ऑपरेटर: विशिष्ट शर्तों को छोड़कर

not ऑपरेटर आपको शैलियों को लागू करने की अनुमति देता है जब कोई विशिष्ट शर्त पूरी नहीं होती है। यह तर्क को उलटने या उन कंटेनरों को लक्षित करने के लिए उपयोगी हो सकता है जिनमें कोई विशेष विशेषता नहीं है।

उदाहरण: मान लीजिए कि आप एक कंटेनर पर एक विशिष्ट शैली लागू करना चाहते हैं, जब तक कि उसमें "featured" क्लास न हो।

            
.card-container {
  container-type: inline-size;
}

@container not (.featured) {
  .card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

            

              
                Copy
              
            
          

इस उदाहरण में, .card पर एक बॉक्स शैडो लागू किया जाएगा जब तक कि .card-container में "featured" क्लास न हो। यदि कंटेनर में "featured" क्लास है, तो बॉक्स शैडो लागू नहीं होगा।

'not' के लिए व्यावहारिक उपयोग के मामले:

• डिफ़ॉल्ट शैलियाँ लागू करना: उन एलिमेंट्स पर डिफ़ॉल्ट शैलियाँ लागू करने के लिए not का उपयोग करें जिनमें कोई विशिष्ट क्लास या एट्रिब्यूट नहीं है। यह कुछ मामलों में शैलियों को ओवरराइड करने की आवश्यकता से बचकर आपके CSS को सरल बना सकता है।
• सशर्त तर्क को उलटना: कभी-कभी यह परिभाषित करना आसान होता है कि शैलियाँ क्या नहीं होनी चाहिए। not आपको अपने तर्क को उलटने और उन एलिमेंट्स को लक्षित करने की अनुमति देता है जो एक विशिष्ट शर्त को पूरा नहीं करते हैं।
• अपवाद बनाना: एक सामान्य स्टाइलिंग नियम के अपवाद बनाने के लिए not का उपयोग करें। उदाहरण के लिए, आप पृष्ठ के एक निश्चित अनुभाग के भीतर मौजूद कंटेनरों को छोड़कर सभी कंटेनरों पर एक विशिष्ट शैली लागू कर सकते हैं।

जटिल शर्तों के लिए लॉजिकल ऑपरेटर्स का संयोजन

कंटेनर क्वेरी लॉजिकल ऑपरेटर्स की असली शक्ति उन्हें जटिल स्थितियाँ बनाने के लिए संयोजित करने से आती है। आप शर्तों को समूहित करने और मूल्यांकन के क्रम को नियंत्रित करने के लिए कोष्ठक (parentheses) का उपयोग कर सकते हैं, ठीक उसी तरह जैसे आप जावास्क्रिप्ट या अन्य प्रोग्रामिंग भाषाओं में करते हैं।

उदाहरण: मान लीजिए कि आप एक कंटेनर पर एक विशिष्ट शैली लागू करना चाहते हैं यदि यह 600px से अधिक चौड़ा है और या तो इसमें "primary" क्लास है या इसमें "secondary" क्लास नहीं है।

            
.card-container {
  container-type: inline-size;
}

@container (min-width: 600px) and (.primary or not(.secondary)) {
  .card {
    border: 2px solid blue;
  }
}

            

              
                Copy
              
            
          

इस उदाहरण में, .card में एक नीला बॉर्डर होगा यदि निम्नलिखित शर्तें पूरी होती हैं:

1. .card-container 600px से अधिक चौड़ा है।
2. और या तो:
• .card-container में "primary" क्लास है।
• या .card-container में "secondary" क्लास नहीं है।

यह उदाहरण दिखाता है कि आप संयुक्त लॉजिकल ऑपरेटर्स का उपयोग करके बहुत विशिष्ट और सूक्ष्म स्टाइलिंग नियम कैसे बना सकते हैं।

ऑपरेटर्स को मिलाते समय ध्यान रखने योग्य बातें:

• ऑपरेटर प्राथमिकता (Operator Precedence): जबकि कोष्ठक मूल्यांकन के क्रम को नियंत्रित करने में मदद करते हैं, लॉजिकल ऑपरेटर्स की डिफ़ॉल्ट प्राथमिकता को समझना महत्वपूर्ण है। CSS कंटेनर क्वेरी में, and की प्राथमिकता or से अधिक होती है। इसका मतलब है कि (A or B) and C, A or (B and C) से अलग है। मूल्यांकन के क्रम को स्पष्ट रूप से परिभाषित करने और अस्पष्टता से बचने के लिए कोष्ठक का उपयोग करें।
• पठनीयता (Readability): जटिल स्थितियाँ पढ़ने और समझने में मुश्किल हो सकती हैं। पठनीयता और रखरखाव में सुधार के लिए कोष्ठक और टिप्पणियों का उपयोग करके जटिल स्थितियों को छोटे, अधिक प्रबंधनीय भागों में तोड़ें।
• परीक्षण (Testing): यह सुनिश्चित करने के लिए कि वे अपेक्षा के अनुरूप व्यवहार करते हैं, विभिन्न कंटेनर आकारों और स्थितियों के साथ अपनी कंटेनर क्वेरी का अच्छी तरह से परीक्षण करें। लागू की गई शैलियों का निरीक्षण करने और यह सत्यापित करने के लिए कि सही नियम लागू हो रहे हैं, ब्राउज़र डेवलपर टूल का उपयोग करें।

वास्तविक-विश्व के उदाहरण और उपयोग के मामले

आइए कुछ वास्तविक-विश्व के उदाहरण देखें कि आप अनुकूलनीय और रिस्पॉन्सिव लेआउट बनाने के लिए कंटेनर क्वेरी लॉजिकल ऑपरेटर्स का उपयोग कैसे कर सकते हैं।

उदाहरण 1: एक लचीला कार्ड कंपोनेंट

एक कार्ड कंपोनेंट पर विचार करें जो अपनी चौड़ाई के आधार पर जानकारी को अलग-अलग तरीकों से प्रदर्शित करता है। हम कार्ड के लेआउट और उपस्थिति को नियंत्रित करने के लिए लॉजिकल ऑपरेटर्स के साथ कंटेनर क्वेरी का उपयोग कर सकते हैं।

            
<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Image">
    <h3>Card Title</h3>
    <p>Card Description</p>
    <a href="#">Learn More</a>
  </div>
</div>

            

              
                Copy
              
            
          

            
.card-container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px; /* Example max-width */
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 1em;
}

.card img {
  width: 100%;
  max-width: 200px; /* Example max-width for the image */
  margin-bottom: 1em;
}

/* Default styles for small containers */
@container (max-width: 400px) {
  .card {
    text-align: center;
  }

  .card img {
    margin: 0 auto 1em;
  }
}

/* Styles for medium containers */
@container (min-width: 401px) and (max-width: 600px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card img {
    margin: 0 1em 0 0;
  }

  .card > *:not(img) {
    flex: 1;
  }
}

/* Styles for large containers */
@container (min-width: 601px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }

  .card img {
    margin: 0 1em 0 0;
  }

  .card > *:not(img) {
    flex: 1;
  }
}

            

              
                Copy
              
            
          

इस उदाहरण में:

• 400px या उससे कम चौड़ाई वाले कंटेनरों के लिए, कार्ड एलिमेंट्स केंद्रित होते हैं।
• 401px और 600px चौड़े कंटेनरों के लिए, छवि और टेक्स्ट एक पंक्ति में प्रदर्शित होते हैं, जिसमें छवि बाईं ओर होती है।
• 600px से अधिक चौड़े कंटेनरों के लिए, लेआउट मध्यम कंटेनर के समान रहता है, लेकिन आइटम्स शुरुआत में संरेखित होते हैं।

उदाहरण 2: एक रिस्पॉन्सिव नेविगेशन मेनू

एक और व्यावहारिक उदाहरण एक रिस्पॉन्सिव नेविगेशन मेनू है जो उपलब्ध स्थान के आधार पर अनुकूल होता है। हम एक कॉम्पैक्ट, आइकन-आधारित मेनू और एक पूर्ण टेक्स्ट-आधारित मेनू के बीच स्विच करने के लिए कंटेनर क्वेरी का उपयोग कर सकते हैं।

            
<nav class="nav-container">
  <ul>
    <li><a href="#home"><i class="fa fa-home"></i> <span>Home</span></a></li>
    <li><a href="#about"><i class="fa fa-info-circle"></i> <span>About</span></a></li>
    <li><a href="#services"><i class="fa fa-wrench"></i> <span>Services</span></a></li>
    <li><a href="#contact"><i class="fa fa-envelope"></i> <span>Contact</span></a></li>
  </ul>
</nav>

            

              
                Copy
              
            
          

            
.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 0.5em;
}

.nav-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
}

.nav-container li a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  padding: 0.5em;
}

.nav-container i {
  font-size: 1.2em;
  margin-right: 0.5em;
}

.nav-container span {
  display: none; /* Hide text by default */
}

/* Styles for larger containers */
@container (min-width: 400px) {
  .nav-container span {
    display: inline; /* Show text for larger containers */
  }
}

            

              
                Copy
              
            
          

इस उदाहरण में, नेविगेशन मेनू आइटम्स शुरू में केवल आइकन प्रदर्शित करते हैं। जब कंटेनर 400px से अधिक चौड़ा होता है, तो टेक्स्ट लेबल आइकन के साथ प्रदर्शित होते हैं, जिससे एक अधिक वर्णनात्मक मेनू बनता है।

उदाहरण 3: अंतर्राष्ट्रीयकरण और टेक्स्ट दिशा

कंटेनर क्वेरी टेक्स्ट दिशा के आधार पर लेआउट को अनुकूलित करने के लिए भी उपयोगी हो सकती हैं। यह उन अंतर्राष्ट्रीय वेबसाइटों के लिए विशेष रूप से महत्वपूर्ण है जो दाएं से बाएं (RTL) लिखी जाने वाली भाषाओं, जैसे अरबी या हिब्रू, का समर्थन करती हैं।

            
<div class="article-container" dir="ltr">
  <article class="article">
    <h1>Article Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
  </article>
</div>

            

              
                Copy
              
            
          

            
.article-container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.article {
  padding: 1em;
}

/* Default styles for LTR (Left-to-Right) */
.article h1 {
  text-align: left;
}

/* Styles for RTL (Right-to-Left) */
@container (dir(rtl)) {
  .article h1 {
    text-align: right;
  }
}

            

              
                Copy
              
            
          

इस उदाहरण में, dir(rtl) कंटेनर क्वेरी उन कंटेनरों को लक्षित करती है जिनका dir एट्रिब्यूट "rtl" पर सेट है। जब टेक्स्ट दिशा RTL होती है, तो हेडिंग दाईं ओर संरेखित होती है। यह सुनिश्चित करता है कि लेआउट विभिन्न भाषाओं और लेखन प्रणालियों के लिए ठीक से अनुकूलित है।

कंटेनर क्वेरी लॉजिकल ऑपरेटर्स का उपयोग करने के लिए सर्वोत्तम प्रथाएं

कंटेनर क्वेरी लॉजिकल ऑपरेटर्स का अधिकतम लाभ उठाने के लिए, निम्नलिखित सर्वोत्तम प्रथाओं को ध्यान में रखें:

• सरल शुरुआत करें: बुनियादी कंटेनर क्वेरी से शुरू करें और आवश्यकतानुसार धीरे-धीरे लॉजिकल ऑपरेटर्स का परिचय दें। अत्यधिक जटिल स्थितियाँ बनाने से बचें जिन्हें समझना और बनाए रखना मुश्किल हो।
• सार्थक नामों का उपयोग करें: अपनी कंटेनर क्वेरी को अधिक पठनीय और स्व-दस्तावेजी बनाने के लिए वर्णनात्मक क्लास नाम और डेटा एट्रिब्यूट्स का उपयोग करें।
• पठनीयता को प्राथमिकता दें: जटिल स्थितियों की पठनीयता में सुधार के लिए कोष्ठक और टिप्पणियों का उपयोग करें। लंबी स्थितियों को छोटे, अधिक प्रबंधनीय भागों में तोड़ें।
• पूरी तरह से परीक्षण करें: यह सुनिश्चित करने के लिए कि वे अपेक्षा के अनुरूप व्यवहार करते हैं, विभिन्न कंटेनर आकारों और स्थितियों के साथ अपनी कंटेनर क्वेरी का परीक्षण करें। लागू की गई शैलियों का निरीक्षण करने और यह सत्यापित करने के लिए कि सही नियम लागू हो रहे हैं, ब्राउज़र डेवलपर टूल का उपयोग करें।
• प्रदर्शन पर विचार करें: जबकि कंटेनर क्वेरी आम तौर पर प्रदर्शनकारी होती हैं, जटिल स्थितियाँ संभावित रूप से प्रदर्शन को प्रभावित कर सकती हैं। अत्यधिक जटिल स्थितियाँ बनाने से बचें जिनके लिए ब्राउज़र को व्यापक गणना करने की आवश्यकता होती है।
• प्रगतिशील वृद्धि (Progressive Enhancement): कंटेनर क्वेरी को एक प्रगतिशील वृद्धि के रूप में उपयोग करें। उन ब्राउज़रों के लिए एक फॉलबैक प्रदान करें जो कंटेनर क्वेरी का समर्थन नहीं करते हैं ताकि कार्यक्षमता का एक बुनियादी स्तर सुनिश्चित हो सके।
• अपने कोड का दस्तावेजीकरण करें: अपनी कंटेनर क्वेरी और उनके पीछे के तर्क का स्पष्ट रूप से दस्तावेजीकरण करें। यह आपके और अन्य डेवलपर्स के लिए भविष्य में आपके कोड को समझना और बनाए रखना आसान बना देगा।

निष्कर्ष: कंटेनर क्वेरी लॉजिक के लचीलेपन को अपनाना

CSS कंटेनर क्वेरी लॉजिकल ऑपरेटर्स अत्यधिक रिस्पॉन्सिव और अनुकूलनीय लेआउट बनाने के लिए एक शक्तिशाली टूलसेट प्रदान करते हैं। 'and', 'or', और 'not' को मिलाकर, आप जटिल स्थितियाँ बना सकते हैं जो विशिष्ट कंटेनर स्थितियों को लक्षित करती हैं और तदनुसार शैलियाँ लागू करती हैं। यह आपके लेआउट पर अधिक विस्तृत नियंत्रण की अनुमति देता है और वास्तव में कंपोनेंट-आधारित रिस्पॉन्सिव डिज़ाइन को सक्षम बनाता है।

जैसे-जैसे कंटेनर क्वेरी का समर्थन बढ़ता जा रहा है, इन तकनीकों में महारत हासिल करना फ्रंट-एंड डेवलपर्स के लिए तेजी से महत्वपूर्ण हो जाएगा। इस गाइड में उल्लिखित सर्वोत्तम प्रथाओं का पालन करके और विभिन्न उपयोग मामलों के साथ प्रयोग करके, आप कंटेनर क्वेरी की पूरी क्षमता को अनलॉक कर सकते हैं और उपकरणों और संदर्भों की एक विस्तृत श्रृंखला में असाधारण उपयोगकर्ता अनुभव बना सकते हैं।

कंटेनर क्वेरी लॉजिक के लचीलेपन को अपनाएं और अपने रिस्पॉन्सिव डिज़ाइन कौशल को अगले स्तर पर ले जाएं!